<html>
	<head>
		<title>dojo.NodeList.instantiate() tests</title>

		<style type="text/css">
			@import "../../dojo/resources/dojo.css";
			@import "css/dijitTests.css";
			#container { height:200px; }
		</style>

		<!-- required: a default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css">

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../dojo/dojo.js"
			djConfig="parseOnLoad: true, isDebug: true"></script>

		<!-- not needed, for testing alternate themes -->
		<script type="text/javascript" src="_testCommon.js"></script>

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit._Widget");
			dojo.require("dojo.parser");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.layout.TabContainer");
			dojo.require("dijit.layout.ContentPane");
			dojo.require("dijit.layout.LinkPane");

			// declare a simple widget to use as a base test:
			dojo.declare("test._Widget",dijit._Widget,{
				message:"",
				postCreate:function(){
					this.inherited(arguments);
					this.connect(this.domNode,"onclick","workit");
					dojo.style(this.domNode,{
						cursor:"pointer",
						color:"#333"
					});
					this.domNode.innerHTML += this.message +" ("+this.id +")";
					console.log('created',this.id);
				},
				workit:function(){
					dojo.place(this.domNode,this.domNode.parentNode,"end");
				}
			});

			var init = function(){
				dojo.byId("status").innerHTML = "after.";

				// test widgeting
				dojo.query("#testList li").instantiate(test._Widget,{}).connect("onclick",console.log);

				// make a tab container from some div, and all it's children div's
				dojo.query("#container")
					.forEach(function(n){
						dojo.query("div",n)
							// create contentpanes from the children and style them
							.instantiate(dijit.layout.ContentPane,{})
							.forEach(function(wn,idx){
								dojo.mixin(dijit.byNode(wn),{ title:"tab" + (idx + 1) })
							})
						;
					})
					.instantiate(dijit.layout.TabContainer,{})
				;
				// should we add auto-startup calling?
				dijit.byId("container").startup();
				//dijit.byId("container").layout();

				// another test widget example
				dojo.query("#altList li").instantiate(test._Widget,{ message:"woot" });

				// bunches of buttons, use you imagination on how to relate them to something
				dojo.query("#buttonTest").forEach(function(n){
					dojo.query("button",n).instantiate(dijit.form.Button,{
						onClick:function(){
							console.log('clicked:',this.domNode);
						}
					});
				});
			};
			dojo.addOnLoad(init)
			//dojo.addOnLoad(function(){
			//	setTimeout(init,25);
			//});
		</script>
	</head>
	<body class="claro">

		<h1>dojo.NodeList.instantiate() tests: <span id="status">before</span></h1>

			<h2>Some simple widgets:</h2>
			<ul id="testList">
					<li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li>
			</ul>
			<ul id="altList">
					<li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li>
			</ul>

			<h2>A TabContainer:</h2>
			<div id="container">
				<div>pane1</div>
				<div>pane2</div>
				<div>pane3</div>
			</div>

			<h2>Some Buttons</h2>
			<div id="buttonTest">
				<button>button 1</button>
				<button>button 2</button>
				<button>button 3</button>
				<button>button 4</button>
				<button>button 5</button>
			</div>

	</body>
</html>
